import React, { useEffect, useState } from 'react';
import { EchartsComp } from './echarts';
import { PlanYearBar, PlanYearLine, PlanMonthLine, PlanYearAllPowerBar } from './helper';
import emitter from '#/utils/events';

export function ChartDealYearBar({
  data = {},
  scale = 1,
  getRef = () => {},
  expand = false,
  isFullScreenEcharts = false,
}) {
  const [config, setConfig] = useState();
  const [theme, setTheme] = useState();

  useEffect(() => {
    setConfig(PlanYearBar(data, scale));
  }, [data, theme, expand, isFullScreenEcharts]);

  useEffect(() => {
    emitter.addListener('onGlobalThemeChange', (e) => {
      setTheme(e.key);
    });
    return () => {
      emitter.removeListener('onGlobalThemeChange', () => {});
    };
  }, []);
  return <EchartsComp config={config} getRef={getRef} />;
}
export function ChartDealYearLine({
  data = {},
  scale = 1,
  expand = false,
  isFullScreenEcharts = false,
  getRef = () => {},
}) {
  const [config, setConfig] = useState();
  const [theme, setTheme] = useState();

  useEffect(() => {
    setConfig(PlanYearLine(data, scale));
  }, [data, theme, expand, isFullScreenEcharts]);

  useEffect(() => {
    emitter.addListener('onGlobalThemeChange', (e) => {
      setTheme(e.key);
    });
    return () => {
      emitter.removeListener('onGlobalThemeChange', () => {});
    };
  }, []);

  return <EchartsComp config={config} getRef={getRef} />;
}
export function ChartDealMonthLine({
  data = {},
  scale = 1,
  expand = false,
  isFullScreenEcharts = false,
  getRef = () => {},
}) {
  const [config, setConfig] = useState();
  const [theme, setTheme] = useState();

  useEffect(() => {
    setConfig(PlanMonthLine(data, scale));
  }, [data, theme, expand, isFullScreenEcharts]);

  useEffect(() => {
    emitter.addListener('onGlobalThemeChange', (e) => {
      setTheme(e.key);
    });
    return () => {
      emitter.removeListener('onGlobalThemeChange', () => {});
    };
  }, []);
  return <EchartsComp config={config} getRef={getRef} />;
}
export function ChartDealAllPowerBar({
  data = {},
  scale = 1,
  expand = false,
  isFullScreenEcharts = false,
  getRef = () => {},
}) {
  const [config, setConfig] = useState();
  const [theme, setTheme] = useState();

  useEffect(() => {
    setConfig(PlanYearAllPowerBar(data, scale));
  }, [data, theme, expand, isFullScreenEcharts]);

  useEffect(() => {
    emitter.addListener('onGlobalThemeChange', (e) => {
      setTheme(e.key);
    });
    return () => {
      emitter.removeListener('onGlobalThemeChange', () => {});
    };
  }, []);
  return <EchartsComp config={config} getRef={getRef} />;
}
